<template>
  <div class="goods-approval" v-loading.fullscreen.lock="loading">
    <page-main :pagination="pagination" @search-data="searchData" @page-change="pageChange">
      <template slot="search">
        <search-form :search="search"></search-form>
      </template>
      <template slot="table">
        <el-table fit stripe border highlight-current-row :data="goodsList" height="100%" class="goods-defs-table">
          <el-table-column prop="goodsName" label="商品名" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="branchName" label="所属总店" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="partnerName" label="所属分店" min-width="100px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="配送方式" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`goods.goodsDefs.buyMethod.${scope.row.buyMethod}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span :class="'status_'+scope.row.status">{{i18n.getMsg(`goods.goodsDefs.status.${scope.row.status}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" :width="handleWidth" header-align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.hasApproval||scope.row.hasRetreat">
                <el-button size="mini" type="primary" @click="approvalGoods(scope.row)">审核</el-button>
              </template>
              <el-button size="mini" type="primary" @click="lookGoods(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </page-main>

    <el-dialog fullscreen class="dialog-fullscreen" :title="dialogType==='look'?'查看商品':'审核商品'" :visible.sync="openDialog" @closed="dialogClosed">
      <div style="height:100%;overflow:auto">
        <goods-form v-if="openDialog" :type="dialogType" :goods="selectGoods" @approval-success="approvalSuccess">
        </goods-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import GoodsApi from 'services/goodsApi';

  import PageMain from 'commonComponents/pageMain';
  import SearchForm from './searchForm';
  import GoodsForm from '../goodsDefs/goodsForm';

  import Pagination from 'models/pagination';
  import GoodsDefsSearch from 'models/goods/goodsDefsSearch';

  export default {
    data() {
      return {
        loading: false,
        search: new GoodsDefsSearch(),
        pagination: new Pagination(),
        goodsList: [],
        openDialog: false,
        selectGoods: null,
        dialogType: '',
        handleWidth: '60px',
      };
    },

    created() {
      this.setGoodsList(true);
    },

    methods: {
      setGoodsList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let pagination = this.pagination;
        this.loading = true;
        GoodsApi.getApprovalGoodsList(search, pagination).then(goodsList => {
          if (isSearch) {
            search.setOldData();
          }

          if (goodsList.length === 0 && pagination.currentPage > 1) {
            this.$nextTick(() => {
              this.setGoodsList(isSearch);
            });
            return;
          }

          this.resetHandleWidth(goodsList);
          this.goodsList = goodsList;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      resetHandleWidth(goodsList) {
        let handleWidth = 0;
        for (let i = 0; i < goodsList.length; i++) {
          const goods = goodsList[i];
          let width = 60;
          if (goods.hasApproval || goods.hasRetreat) {
            width += 65;
          }
          if (handleWidth < width) {
            handleWidth = width;
          }
        }

        handleWidth += 20;
        this.handleWidth = handleWidth + 'px';
      },

      searchData() {
        this.pagination.currentPage = 1;
        this.setGoodsList(true);
      },

      pageChange() {
        this.setGoodsList();
      },

      lookGoods(goods) {
        this.selectGoods = goods;
        this.dialogType = 'look';
        this.openDialog = true;
      },

      approvalGoods(goods) {
        this.selectGoods = goods;
        this.dialogType = 'approval';
        this.openDialog = true;
      },

      approvalSuccess(){
        this.setGoodsList();
        this.openDialog = false;
      },

      dialogClosed() {
        this.selectGoods = null;
        this.dialogType = '';
      }
    },

    components: {
      PageMain,
      SearchForm,
      GoodsForm
    }
  };

</script>

<style lang="scss" scoped>
  .goods-approval {
    height: 100%;

    .goods-defs-table {
      .el-button+.el-button {
        margin-left: 0;
      }
    }

    .status_-1 {
      color: #ffa500;
    }

    .status_0 {
      color: #ff0000;
    }

    .status_1 {
      color: #11b95c;
    }

    .status_2 {
      color: #cccccc;
    }
  }

</style>
